<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领 - 登录注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#60a5fa'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-image: url('https://ai-public.mastergo.com/ai/img_res/a2124aa8fa6c73e9a901e28a4cffd518.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .form-container {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.85);
        }
        .input-icon {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .social-icon {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="min-h-[1024px] flex items-center justify-center p-8">
    <div class="form-container w-full max-w-md rounded-2xl shadow-xl overflow-hidden border border-gray-100">
        <div class="bg-primary py-6 px-8 text-center">
            <h1 class="font-['Pacifico'] text-3xl text-white">logo</h1>
            <h2 class="text-xl font-semibold text-white mt-2">校园失物招领平台</h2>
        </div>

        <div class="bg-white px-8 pt-6 pb-8">
            <div class="flex border-b border-gray-200 mb-6">
                <button id="login-tab" class="flex-1 py-2 font-medium text-primary border-b-2 border-primary">登录</button>
                <button id="register-tab" class="flex-1 py-2 font-medium text-gray-500">注册</button>
            </div>

            <div id="login-form">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="login-account">手机号 / 学号</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-user input-icon text-gray-400"></i>
                        </div>
                        <input id="login-account" type="text" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入手机号或学号">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="login-password">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock input-icon text-gray-400"></i>
                        </div>
                        <input id="login-password" type="password" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入密码">
                    </div>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <input id="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住密码</label>
                    </div>
                    <a href="#" class="text-sm text-primary hover:text-secondary">忘记密码?</a>
                </div>
                <button class="w-full bg-primary hover:bg-secondary text-white font-medium py-2 px-4 rounded-button whitespace-nowrap transition">登录</button>
            </div>

            <div id="register-form" class="hidden">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="register-phone">手机号码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-mobile-alt input-icon text-gray-400"></i>
                        </div>
                        <input id="register-phone" type="text" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入手机号码">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="register-code">验证码</label>
                    <div class="flex gap-2">
                        <div class="relative flex-1">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-sms input-icon text-gray-400"></i>
                            </div>
                            <input id="register-code" type="text" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入验证码">
                        </div>
                        <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-button whitespace-nowrap transition">获取验证码</button>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="register-password">设置密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock input-icon text-gray-400"></i>
                        </div>
                        <input id="register-password" type="password" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入6-20位密码">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="register-confirm">确认密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock input-icon text-gray-400"></i>
                        </div>
                        <input id="register-confirm" type="password" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请再次输入密码">
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-medium mb-2" for="register-student-id">学号</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-id-card input-icon text-gray-400"></i>
                        </div>
                        <input id="register-student-id" type="text" class="w-full py-2 pl-10 pr-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition" placeholder="请输入学号">
                    </div>
                </div>
                <button class="w-full bg-primary hover:bg-secondary text-white font-medium py-2 px-4 rounded-button whitespace-nowrap transition">注册</button>
            </div>

            <div class="mt-8">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-200"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                    </div>
                </div>
                <div class="mt-6 grid grid-cols-3 gap-4">
                    <a href="#" class="social-icon rounded-full bg-gray-100 hover:bg-gray-200 transition">
                        <i class="fab fa-weixin text-green-500 text-xl"></i>
                    </a>
                    <a href="#" class="social-icon rounded-full bg-gray-100 hover:bg-gray-200 transition">
                        <i class="fab fa-qq text-blue-500 text-xl"></i>
                    </a>
                    <a href="#" class="social-icon rounded-full bg-gray-100 hover:bg-gray-200 transition">
                        <i class="fab fa-alipay text-blue-400 text-xl"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-gray-50 px-8 py-4 text-center">
            <p class="text-xs text-gray-500">
                注册即表示您同意我们的 <a href="#" class="text-primary hover:text-secondary">用户协议</a> 和 <a href="#" class="text-primary hover:text-secondary">隐私政策</a>
            </p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');

            loginTab.addEventListener('click', function() {
                loginTab.classList.add('text-primary', 'border-primary');A
                loginTab.classList.remove('text-gray-500');
                registerTab.classList.add('text-gray-500');
                registerTab.classList.remove('text-primary', 'border-primary');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            });

            registerTab.addEventListener('click', function() {
                registerTab.classList.add('text-primary', 'border-primary');
                registerTab.classList.remove('text-gray-500');
                loginTab.classList.add('text-gray-500');
                loginTab.classList.remove('text-primary', 'border-primary');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            });
        });
    </script>
</body>
</html>